<!-- <custom-tab-bar direction="horizontal" :show-icon="" :selected="" @onTabItemTap="" /> -->
<template>
	<view class="index" :style="{
		'padding-top':$top
	}">
		<view class="content_2">
			<view class="topt">
				<u-image width="130rpx" height="70rpx" :src="srcv" mode="" />
				<view style="display: flex;margin-top: 10rpx;">
					<view class="huibiao" @click="xiaoxi">
						<u-badge :absolute='true' is-center type="error" class="badge" count="5"></u-badge>
					</view>
					<image @click="renlian" style="margin-right: 15rpx;width: 50rpx;height: 50rpx;" :src="src2"
						mode="" />
				</view>
			</view>
			<myInput @search="search" />
			<view class="wrap">
				<u-swiper :list="listimg" mode="round" />
			</view>
			<view class="all bottom">
				<view class="imageall" v-for="(item,index) in listone" @click="daohang(item.name)">
					<image style="width: 76rpx;height: 76rpx;" :src="item.src" />
					<view class="imagealltext">{{item.name}}</view>
				</view>
			</view>
			<view class="gg bottom">
				<u-image @click="onsubm(img1.id)" width="100%" :height="img1.height?img1.height:200+'rpx'"
					:src="img1.image" mode="" />
			</view>
			<view class="zhibobg">
				<view class="zhibo bottom">
					<!-- 直播课程 -->
					<view class="zhibo_1">
						<view class="zhibo_1_t">直播
							<text class="zhibo_time" v-if="time">今日{{time.debut_time}}</text>
						</view>
						<view @click="daohang('直播')" class="zhibo_2_t">更多
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>

					<swiper v-if="info.zhibo" @change="swiperChange" style="height: 260rpx;" :duration="500"
						:current='current' autoplay circular>
						<swiper-item @click="musubmit('直播',item)" v-for="(item,index) in info.zhibo">
							<image :src="item.logo_image" style="width: 100%;height: 100%" />
						</swiper-item>
					</swiper>
				</view>
				<!-- 视频课程 -->
				<view class="zhibo bottom">
					<view class="zhibo_1">
						<view class="zhibo_1_t">视频课程
						</view>
						<view class="zhibo_2_t" @click="daohang('精品课程')">更多 <u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="shipinkecheng">
						<view v-if="info.shipin" class="shipinkecheng_1" @click="musubmit('视频',item)"
							v-for="item in info.shipin">
							<image style="width: 280rpx;height: 160rpx;border-radius: 6rpx;" :src="item.logo_image"
								mode="" />
							<view class="shipinkecheng_2">{{item.name}}</view>
							<view class="shipinkecheng_3">{{item.study}}人已学习</view>
						</view>
					</view>
				</view>
				<!-- 线下课程 -->
				<view class="zhibo bottom">
					<view class="zhibo_1">
						<view class="zhibo_1_t">线下课程
						</view>
						<view class="zhibo_2_t" @click="daohang('线下课程')">更多 <u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<swiper v-if="info.zhibo" @change="swiperChange1" style="height: 260rpx;" :duration="500"
						:current='current1' autoplay circular>
						<swiper-item @click="musubmit('线下',item)" v-for="(item,index) in info.xianxia">
							<image :src="item.logo_image" style="width: 100%;height: 100%" />
						</swiper-item>
					</swiper>
					<view class="bottom" style="margin-top: 25rpx;">
						<u-image @click="onsubm(img2.id)" width="100%" :height="img2.height?img2.height:200+'rpx'"
							:src="img2.image" mode="" />
					</view>
					<view class="xian" />
					<!-- 专栏课程 -->
					<view v-for="(item,index) in info.zhuanlan" v-if="info.zhuanlan">
						<zhuanlan @onzuanlan='onzuanlan' :index="index==info.zhuanlan.length-1?1:''" :data='item'>
						</zhuanlan>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import myInput from '@/components/searchinput.vue'
	export default {
		components: {
			myInput
		},
		data() {
			return {
				height: '',
				current: '',
				current1: '',
				imageList: '',
				img1: {},
				img2: {},
				listimg: [],
				info: {
					zhibo: [],
					shipin: [],
					xianxia: [],
					marketing: [],
				},
				srcv: require('@/static/img/57.png'),
				src2: require('@/static/img/4.png'),
				list: [
					'https://s4.ax1x.com/2022/01/13/7Q99rF.png', 'https://cdn.uviewui.com/uview/swiper/2.jpg'
				],
				title: 'Hello',
				listone: [{
						src: 'https://s4.ax1x.com/2022/01/13/7MD2Bq.png',
						name: '直播'
					},
					{
						src: 'https://s4.ax1x.com/2022/01/13/7QK18U.png',
						name: '精品课程'
					},
					{
						src: 'https://s4.ax1x.com/2022/01/13/7QKYr9.png',
						name: '系列课'
					},
					{
						src: 'https://s4.ax1x.com/2022/01/13/7QK32F.png',
						name: '优选项目'
					},
				],
			}
		},
		onLoad() {
			this.getinfo()
		},
		computed: {
			time() {
				return this.info.zhibo.filter((v, index) => {
					return index == this.current
				})[0]
			},
		},
		mounted() {

			this.height = this.$top1
			console.log(this.height)
		},
		methods: {
			musubmit(a, b) {
				if (a == '直播') {
					uni.navigateTo({
						url: `/pages/previewdetails/lookback?cur_id=${b.id}`
					});
				} else if (a == '视频') {
					uni.navigateTo({
						url: `/pages/Boutique/details?cur_id=${b.id}`
					});
				} else if (a == '线下') {
					uni.navigateTo({
						url: `/pages/index/xianxiake/xiangqing?cur_id=${b.id}`
					});
				}
			},
			onzuanlan(a) {
				uni.navigateTo({
					url: `/pages/specialcolumn/xiangqing?cur_id=${a.id}`
				});
			},
			getinfo() {
				this.$api('index/live_broadcast').then(res => {
					this.info.zhibo = res.data
				})
				//视频课程
				this.$api('index/boutique').then(res => {
					this.info.shipin = res.data
				})
				//线下课程
				this.$api('index/offline').then(res => {
					this.info.xianxia = res.data
				})
				//专栏
				this.$api('index/special_column').then(res => {
					this.info.zhuanlan = res.data
					console.log(this.info.zhuanlan)
				})
				this.$api('index/lunbo').then(res => {
					this.listimg = res.data
				})
				//营销
				this.$api('index/marketing').then(res => {
					this.info.marketing = res.data
					this.img1 = res.data.filter(v => {
						return v.position == 1
					})[0]
					this.img2 = res.data.filter(v => {
						return v.position == 2
					})[0]
					console.log(this.img1)
				})
			},
			//轮播图的切换事件
			swiperChange(e) {
				this.current = e.target.current //获取当前轮播图片的下标, 可以给当前指示点加样式
			},
			swiperChange1(e) {
				this.current1 = e.target.current //获取当前轮播图片的下标, 可以给当前指示点加样式
			},
			renlian() {
				uni.navigateTo({
					url: './my/mbsb'
				})
				return
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['original'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['camera '],
					success: (res) => {
						console.log(res)
						this.imageList = res.tempFilePaths[0]
						uni.uploadFile({
							url: 'http://demo.hcoder.net/index.php?c=uperTest', // 需要上传的地址
							filePath: imageList,
							name: 'file',
							success(res1) {
								console.log(res1)
							}
						});
					}
				})
			},
			// 搜索
			search() {
				console.log('测试')
			},
			// 专栏跳转
			zuanlan(a, index) {
				uni.navigateTo({
					url: `/pages/specialcolumn/xiangqing?type=${index+1}`
					// url: `/pages/specialcolumn/specialcolumn?type=${2}`
				});
			},
			//消息跳转
			xiaoxi() {
				uni.navigateTo({
					url: '/pages/news/news'
				});
			},

			onsubm(a) {
				this.$api('index/markJump', {
					mark_id: a
				}).then(res => {
					uni.navigateTo({
						url: `/pages/onsubm/onsubm?data=${JSON.stringify(res.data)}`
					});
				})
				//跳转


			},
			daohang(item) { //导航跳转
				if (item == '直播') {
					uni.navigateTo({
						url: '/pages/broadcast/broadcast'
					});
				} else if (item == '精品课程') {
					uni.navigateTo({
						url: '/pages/Boutique/Boutique'
					});

				} else if (item == '线下课程') {
					uni.navigateTo({
						url: `/pages/courses/details_c?current=3`
					})
				} else if (item == '优选项目') {
					uni.navigateTo({
						url: '/pages/courses/preferred'
					})
				} else if (item == '系列课') {
					uni.navigateTo({
						url: '/pages/courses/courses'
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	.huibiao {
		margin-right: 15rpx;
		width: 50rpx;
		height: 50rpx;
		position: relative;
		background-image: url(https://s4.ax1x.com/2022/01/13/7QNFjP.png);
		background-size: 100%;

		.badge {}
	}

	.topt {
		display: flex;
		width: 90%;
		margin: auto;
		position: relative;
		margin-top: 10rpx;
		justify-content: space-between;
	}

	::-webkit-scrollbar {
		display: none;
	}

	.input {
		height: 68rpx;
		background-image: url(https://s4.ax1x.com/2022/01/13/7QPk1x.png);
		background-size: 100%;
		border-top: 2px solid #141414;
		border-bottom: 2px solid #141414;
		border-left: 4px solid #141414;
		border-right: 4px solid #141414;
	}

	.wrap {
		padding: 0 40rpx 40rpx 40rpx;
	}

	.body {
		.body_text {
			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			line-height: 33rpx;
			color: #91969A;
			opacity: 1;
			margin: 30rpx 0 20rpx 0;
		}

		.body_a {
			display: flex;
		}

		.body_b {
			.body_b_1 {
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				line-height: 44rpx;
				color: #333333;
				opacity: 1;
				margin-left: 20rpx;
			}

			.body_b_2 {
				margin-left: 20rpx;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 39rpx;
				color: #333333;
				text-align: justify;
				margin-top: 10rpx;
				opacity: 1;
			}
		}
	}

	.zhibobg {
		width: 100%;
		background: rgba(248, 248, 250, 0.6);
	}

	.xian {
		height: 1px;
		background: #EFEFEF;
		opacity: 1;
		margin-top: 30rpx;
	}

	.zhibo {
		width: 90%;
		margin: auto;

		.shipinkecheng {
			width: 100%;
			display: flex;
			overflow-x: auto;
			display: -webkit-box;
			overflow-y: hidden;
		}

		.shipinkecheng_1 {
			margin-right: 15rpx;
			width: 43%;
		}

		.shipinkecheng_2 {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			line-height: 45rpx;
			color: #333333;
			opacity: 1;
		}

		.shipinkecheng_3 {
			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			line-height: 45rpx;
			color: #91969A;
			opacity: 1;
		}

		.guanggao1 {
			.left {
				.left_1 {
					font-size: 34rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					line-height: 45rpx;
					color: #333333;
					opacity: 1;
				}

				.left_2 {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					line-height: 45rpx;
					color: #91969A;
					opacity: 1;
				}

				.left_3 {
					display: flex;
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					line-height: 45rpx;
					color: #141414;
					opacity: 1;
				}

				.left_4 {
					width: 200rpx;
					height: 58rpx;
					text-align: center;
					background: #FFE100;
					opacity: 1;
					border-radius: 8rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					line-height: 58rpx;
					color: #703F00;
					opacity: 1;
				}
			}
		}
	}

	.bottom {
		margin-bottom: 30rpx;
	}

	.zhibo_1 {

		display: flex;
		margin-top: 30rpx;
		justify-content: space-between;

		.zhibo_text {
			margin-left: 10rpx;
			font-size: 24rpx;
			font-family: Source Han Sans SC;
			font-weight: 400;
			color: #141414;
			opacity: 1;
		}

		.zhibo_time {
			margin-left: 10rpx;
			background-color: rgb(245, 77, 87);
			padding: 0 15rpx 0 15rpx;
			border-radius: 20rpx 0 20rpx 0;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			line-height: 0px;
			color: #FFFFFF;
			opacity: 1;
		}

		.zhibo_1_t {
			font-size: 42rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #141414;
			opacity: 1;
		}

		.zhibo_2_t {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #91969A;
			line-height: 70rpx;
			opacity: 1;
		}

	}

	.gg {
		width: 90%;
		margin: auto;
	}

	.all {
		// margin-bottom: 30px;
		display: flex;
		width: 100%;
		justify-content: space-around;
	}

	.imageall {
		text-align: center;

		.imagealltext {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #141414;
			margin-top: 20rpx;
			opacity: 1;
		}
	}

	.top_img {
		width: 53px;
		height: 30px;
	}

	.content {
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
	}
</style>
